<template>
  <div v-if="navData.length" :class="$style.nav">
    <button v-for="x in navData" :key="x.id" @click="onClick(x)">
      <img :src="x.icon" alt="">
      <span>{{ x.name }}</span>
    </button>
  </div>
</template>

<script
  lang="ts"
  setup
  name="NavList"
>
import useNav from '@/hooks/useNav'

const { navData, onClick } = useNav()

</script>

<style
  module
  lang="scss"
>
.nav {
  @apply relative flex flex-col w-full text-white;

  &::before {
    content: '';
    @apply absolute top-0 left-0 bottom-0 right-0 z-0 backdrop-filter backdrop-blur-4;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(190, 209, 227, 0.5);
    border-radius: 10px;
  }

  button {
    @apply w-full flex flex-col items-center relative z-1;
    color: #3A5277;
    padding: 9px 14px 7px;

    img {
      width: 22px;
      height: 22px;
      margin-bottom: 4px;
    }

    span {
      font-size: 10px;
      line-height: 14px;
      font-weight: 700;
      letter-spacing: 1px;
      white-space: nowrap;
    }

    &+button::after {
      @apply absolute top-0;
      content: '';
      left: 14%;
      width: 72%;
      height: 1px;
      background: linear-gradient(270deg, transparent 0%, rgba(255, 255, 255, 0.65) 50%, transparent 100%);
    }

    &:active {
      @apply text-primary;
    }
  }
}
</style>
